<polymer-element name="github-gist" attributes="gistid">
    <template></template>
    <script>
        Polymer('github-gist', {
            gistid: null,
            styleEl: null,
            gistEl: null,
            scriptEl: null,

            ready: function(){
                this.createElements();
            },

            gistidChanged: function(){
                this.loadJSON();
            },

            loadJSON: function(){
                var callbackFunc = callbackFuncName + '_' + callbackId++;
                window[callbackFunc] = function(object){
                    this.processResponse(object);
                }.bind(this);

                var srcString = 'https://gist.github.com/' + this.gistid + '.json?callback=' + callbackFunc;
                this.applyScript(srcString);
            },

            processResponse: function(object){
                if(object && object.div && object.stylesheet){
                    if(object.stylesheet.indexOf('http') !== 0){
                        if(object.stylesheet.indexOf('/') !== 0){
                            object.stylesheet = '/' + object.stylesheet;
                        }
                        object.stylesheet = 'https://gist.github.com' + object.stylesheet;
                    }
                    this.applyStyle(object.stylesheet);
                    this.applyGist(object.div);
                }
            },

            applyGist: function(htmlString){
                if(htmlString){
                    this.gistEl.innerHTML = htmlString;
                }
            },

            applyStyle: function(scrString){
                if(scrString){
                    while(this.styleEl.hasChildNodes()){
                        this.styleEl.removeChild(this.styleEl.lastChild);
                    }
                    this.styleEl.appendChild(document.createTextNode('@import url("' + scrString + '");'));
                }
            },

            applyScript: function(scrString){
                var errorCallback = function(){
                    var htmlString = '<p>Loading gist failed..</p>';
                    this.applyGist(htmlString);
                }.bind(this);

                if(scrString){
                    this.shadowRoot.removeChild(this.scriptEl);
                    this.scriptEl = document.createElement('script');
                    this.scriptEl.src = scrString;
                    this.shadowRoot.appendChild(this.scriptEl);
                }

                if(window.addEventListener){
                    this.scriptEl.removeEventListener('error');
                    this.scriptEl.addEventListener('error', errorCallback);
                }
                else{
                    this.scriptEl.attachEvent('onerror', errorCallback);
                    this.scriptEl.detachEvent('onerror');
                }
            },

            createElements: function(){
                if(!(this.styleEl && this.gistEl && this.scriptEl)){
                    this.styleEl = document.createElement('style'),
                    this.gistEl = document.createElement('div'),
                    this.scriptEl = document.createElement('script');
                    this.shadowRoot.appendChild(this.styleEl);
                    this.shadowRoot.appendChild(this.gistEl);
                    this.shadowRoot.appendChild(this.scriptEl);
                }
            }
        });
        var callbackFuncName = 'getResponse';
        var callbackId = 0;
    </script>
</polymer-element>
